<template>
  <div class="vuer-qianyue">
    <h3>编辑签约信息</h3>
    <hr>
    <h4>居民信息</h4>
    <div class="user-message">
    <el-form :model="form" label-width="120px">
      <div style="display: inline-block; margin-left: 5px;margin-bottom: 10px;">
        <span style="margin-left: 5px; margin-right: 8px;">姓名</span>
      <el-input v-model="form.name" style="width:200px; display: inline-block;" placeholder="李力"/>
    </div>

    <div style="display: inline-block; margin-left: 5px;margin-bottom: 10px;">
        <span style="margin-left: 130px; margin-right: 8px;">身份证号</span>
      <el-input v-model="form.date3" style="width:200px; display: inline-block;" placeholder="请输入"/>
      </div>
    <div style="display: inline-block; margin-left: 5px;margin-bottom: 10px;">
        <span style="margin-left: 130px; margin-right: 8px;">性别</span>
        <el-select v-model="form.region" placeholder="请选择">
        <el-option label="请选择" value="请选择" />
        <el-option label="男" value="男" />
        <el-option label="女" value="女" />
      </el-select>
    </div>
  </el-form>
  </div>
  <div>
  <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration" style="color:#000">出生年月</span>
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="请选择日期"
        :default-value="new Date(2022, 11, 8)"
        style="display:inline-block;
        margin-left: 30px;
        width: 160px;"
      />
    </div>
    </div>
    <div style="display: inline-block; margin-left: 5px;margin-bottom: 10px;">
        <span style="margin-left: 130px; margin-right: 8px;">手机号码</span>
      <el-input v-model="form.date4" style="width:200px; display: inline-block;" placeholder="请输入"/>
    </div>

    <div style="display: inline-block; margin-left: 5px;margin-bottom: 10px;">
        <span style="margin-left: 130px; margin-right: 8px;">现居地</span>
      <el-input v-model="form.address" style="width:230px; display: inline-block;" placeholder="请输入"/>
    </div>

    </div>
    <div>
      <div style="display: inline-block;">
      <span style="margin-left: 5px; margin-right: 8px;">居民标签</span>
        <el-select
          multiple 
          v-model="value5"
          collapse-tags
          placeholder="请选择"
          style="width: 180px"
        >
          <el-option
            v-for="item in arr5"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div style="margin-top:20px;">
        <span style="margin-right: 8px;">家庭成员</span>
        <div style="display:inline-block;" class="box-1">
            <img src="https://www.pmdaniu.com/storages/127496/5e1a546311e3b27aa7a6b6b7fb02a8bc-57026/images/%E5%BE%85%E5%AE%A1%E6%A0%B8%E7%AD%BE%E7%BA%A6%E8%AF%A6%E6%83%85/u1693.jpg"
            class="image"
            >
            <span>李清</span><br>
            <span style="margin-left:60px;">关系:父母</span>
        </div>
        <div style="display:inline-block;" class="box-2">
            <img src="https://www.pmdaniu.com/storages/127496/5e1a546311e3b27aa7a6b6b7fb02a8bc-57026/images/%E5%BE%85%E5%AE%A1%E6%A0%B8%E7%AD%BE%E7%BA%A6%E8%AF%A6%E6%83%85/u1699.png"
            class="image"
            >
            <span>王林</span><br>
            <span style="margin-left:60px;">关系:夫妻</span>
        </div>

        <el-link> +联家庭成员</el-link>
      </div>
      <hr>
      <h4>签约信息</h4>
      <div>
        <span>签约编号</span>
        <span style="margin-left:10px;">20190009091</span>
        <span style="margin-left:230px;">签约状态</span>
        <span style="margin-left:10px; color:green;">待审核</span>
        <div style="display: inline-block; margin-left: 20px">
        <span style="margin-left: 220px; margin-right: 8px;">签约机构</span>
        <el-select
          v-model="value2"
          collapse-tags
          placeholder="请选择"
          style="width: 200px"
        >
          <el-option
            v-for="item in arr2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      </div>
      <div>
        <div style="display: inline-block; margin-top: 20px;">
        <span style="margin-right: 8px;">签约团队</span>
        <el-select
          v-model="value3"
          collapse-tags
          placeholder="请选择"
          style="width: 200px;"
        >
          <el-option
            v-for="item in arr3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div style="display: inline-block; margin-top: 20px;">
        <span style="margin-right: 8px; margin-left: 130px;">签约医生</span>
        <el-select
          v-model="value4"
          collapse-tags
          placeholder="请选择"
          style="width: 200px;"
        >
          <el-option
            v-for="item in arr4"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div style="display: inline-block; margin-top: 20px;">
        <span style="margin-right: 8px; margin-left: 100px;">签约医生</span>
        <el-select
          v-model="value6"
          collapse-tags
          placeholder="请选择"
          style="width: 200px;"
        >
          <el-option
            v-for="item in arr6"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      </div>
      <div style="margin-top:20px;">
        <span>签约类型</span>
        <span style="margin-left:10px;font-size:14px; color:#000">首次签约</span>
        <span style="margin-left:270px;">签约周期</span>
        <span style="margin-left:10px; font-size:14px; color:#000">1年</span>
        <span style="margin-left:270px;">费用</span>
        <span style="margin-left:10px; font-size:14px; color:#000">￥120</span>
      </div>
      <div>
        <span>申请时间</span>
        <span style="margin-left:10px; font-size:14px; color:#000">2022/11/10 11:02</span>
        <div class="demo-date-picker" style="margin-left:220px;">
      <div class="block">
      <span class="demonstration" style="color:#000">生效日期</span>
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="请选择日期"
        :default-value="new Date(2022, 11, 8)"
        style="display:inline-block;
        margin-left: 30px;
        width: 160px;"
      />
    </div>
    </div>
      </div>
      <div>
        <span style="margin-right: 8px;">签约备注</span>
       <el-input v-model="form.message" style="width:600px;height: 120px;" placeholder="请输入签约备注"/>
      </div>
      <hr>
      <div>
        <el-button :plain="true" @click="open2" style="background:blue;color:#fff">保存</el-button>
        <el-button type="primary" class="butt-4" style="background:#eee; color:#000" @click="toUserAdd">返回</el-button>
      </div>
      </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import router from '../../router'

const value1 = ref('')
const value2 = ref([])
const value3 = ref([])
const value4 = ref([])
const value5 = ref([])
const value6 = ref([])

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  date3: '',
  date4: '',
  address: '',
  message: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
const open2 = () => {
  ElMessage({
    message: '保存成功',
    type: 'success',
  })
}
function toUserAdd () {
    router.push('/user-management/user-add')
}
const arr2 = [
  {
    value: '请选择',
    label: '请选择',
  },
  {
    value: '罗西社区服务中心',
    label: '罗西社区服务中心',
  },
  {
    value: '天明社区服务中心',
    label: '天明社区服务中心',
  },
  {
    value: '明进社区服务中心',
    label: '明进社区服务中心',
  },
]
const arr3 = [
  {
    value: '请选择',
    label: '请选择',
  },
  {
    value: '李明明团队',
    label: '李明明团队',
  },
  {
    value: '王汉文团队',
    label: '王汉文团队',
  },
  {
    value: '李明进团队',
    label: '李明进团队',
  },
]
const arr4 = [
  {
    value: '请选择',
    label: '请选择',
  },
  {
    value: '李明明',
    label: '李明明',
  },
  {
    value: '王汉文',
    label: '王汉文',
  },
  {
    value: '李明进',
    label: '李明进',
  },
]

const arr5 = [
  {
    value: '脂肪肝',
    label: '脂肪肝',
  },
  {
    value: '慢病护理',
    label: '慢病护理',
  },
  {
    value: '高血压',
    label: '高血压',
  },
  {
    value: '高血糖',
    label: '高血糖',
  },
]
const arr6 = [
  {
    value: '请选择',
    label: '请选择',
  },
  {
    value: '基础包',
    label: '基础包',
  },
  {
    value: '老年人基础包',
    label: '老年人基础包',
  },
  {
    value: '慢性病护理包',
    label: '慢性病护理包',
  },
]

</script>

<style scoped>
.demo-date-picker {
  display: inline-block;
  /* width: 100%; */
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.box-1 {
    margin-left: 20px;
    border: 1px solid rgb(190, 184, 184);
    width: 200px;
    height: 80px;
    margin-right: 20px;
}
.box-2 {
    margin-left: 20px;
    border: 1px solid rgb(190, 184, 184);
    width: 200px;
    height: 80px;
    margin-right: 20px;
}

.image {
    width: 50px;
    height: 50px;
    display: inline-block;
    margin-right: 20px;
}
</style>
